<template>
    <div>
        <div class="todo" v-for="todo in filteredTodoList" :key="todo.id">
            <div class="todo-text">{{ todo.text }}</div>
            <div v-if="todo.isEnd">✅</div>
            <button v-else @click="finish(todo.id)">完成</button>
            <button @click="remove(todo.id)">删除</button>
        </div>
    </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useTodoStore } from '../stores/TodoListStore';
const todoStore = useTodoStore();
const { filteredTodoList } = storeToRefs(todoStore);
function finish(id) {
    todoStore.finish(id)
}
function remove(id) {
    todoStore.remove(id)
}

</script>
<style scoped>
.todo {
    display: flex;
    flex-direction: row;
    border: 1px solid #eee;
    padding: 10px;
}

.todo-text {
    width: 200px;
}
</style>